<script setup>
import { ref } from 'vue'
import { usePatientStore, usePopupStore } from '@/store/index.js'
import { postRegappoin } from '@/apis/apis.js'
import { showToast } from '@/utils/utils.js'
const activeIndex = ref(-1)
const patientStore = usePatientStore()
const popupStore = usePopupStore()
const handleChooseMember = () => {
  uni.navigateTo({
    url: '/pages/my-service/my-patient/my-patient'
  })
}
const handleChange = (item, index) => {
  activeIndex.value = index
  popupStore.updateTheTime(item)
}
const handleSubmit = async () => {
  const data = {
    week: popupStore.week,
    the_time: popupStore.the_time,
    when: popupStore.when,
    _id: popupStore.id,
    patient_id: patientStore.patientId
  }
  await postRegappoin(data)
  showToast('预约成功')
  setTimeout(() => {
    uni.navigateBack()
    uni.redirectTo({ url: '/pages/my-service/my-registration/my-registration' })
  }, 1000)
}
const handleClickoverlay = () => {
  popupStore.updateShow(false)
  activeIndex.value = -1
  patientStore.updatePatientId('')
  patientStore.updatePatientName('')
  popupStore.updateTheTime('')
}
</script>

<template>
  <page-container class="component" :show="popupStore.show" @clickoverlay="handleClickoverlay" @afterleave="handleClickoverlay">
    <view class="container">
      <view class="period">
        <view class="period-title">请选择预约时间段</view>
        <scroll-view scroll-x enable-flex class="period-content">
          <view class="period-content-item" :class="{ active: activeIndex === index }" @click="handleChange(item, index)" v-for="(item, index) in popupStore.time" :key="index">{{ item }}</view>
        </scroll-view>
      </view>
      <view class="member">
        <view class="member-title">选择成员</view>
        <view class="member-content">
          <view class="member-content-left">
            <image class="member-content-left-avatar" src="/static/images/touxiang.svg" mode="aspectFill"></image>
            <view class="member-content-left-name">{{ patientStore.patientName }}</view>
          </view>
          <view class="member-content-right" @click="handleChooseMember">{{ patientStore.patientId ? '重新选择' : '选择成员' }}</view>
        </view>
      </view>
      <view class="submit" @click="handleSubmit">提交预约</view>
    </view>
  </page-container>
</template>

<style scoped lang="scss">
.component {
  .container {
    padding: 20rpx;
    padding-bottom: env(safe-area-inset-bottom);
    background-color: #fff;
    .period {
      margin-bottom: 40rpx;
      .period-title {
        margin-bottom: 40rpx;
        text-align: center;
        font-weight: bold;
      }
      .period-content {
        display: flex;
        height: 100rpx;
        white-space: nowrap;
        .period-content-item {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 10rpx 40rpx;
          background-color: #f8f8f8;
          color: #3375f5;
          &.active {
            background-color: #3375f5;
            color: #fff;
          }
        }
      }
    }
    .member {
      margin-bottom: 40rpx;
      .member-title {
        margin-bottom: 40rpx;
        text-align: center;
        font-weight: bold;
      }
      .member-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .member-content-left {
          display: flex;
          align-items: center;
          .member-content-left-avatar {
            margin-right: 20rpx;
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
          }
        }
        .member-content-right {
          color: #3375f5;
        }
      }
    }
    .submit {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20rpx 0;
      background-color: #3375f5;
      border-radius: 10rpx;
      color: #fff;
    }
  }
}
</style>
